<template>
    <div>
        <div id="mescroll2" class="mescroll" ref="myself" :class="'mescroll'+$route.query.select">
            <ul id="dataList2" class="data-list">
               
                <li class="product-one" v-for="(item,key) in dataList" :key="key">
                    <router-link  :to="{path:'/card/product',query:{id:item.id ,uid:item.uid}}" class="clarefix">
                    <p class="product-pic"><img :src="baseUrl+item.cplogo"></p>
                    <p class="product-name">{{item.cname}}</p>
                    </router-link>
                </li>
                <div v-if="hasdata" style="height:30px;" class="more" @click="loadmore">点击加载更多...</div>
                <div v-if="nodata" style="height:30px;" class="more">没有数据了哦！</div>
            </ul>
        </div>
    </div>
</template>

<script>
import {baseUrl} from '@/config/env.js'
import fetch from '@/config/fetch.js'
let curId='';
export default {
    data () {
      return {
        curId:curId?curId:this.$route.query.id,
        hasdata:false,
        nodata:false,
        cardIds:[],
        pageNo:1,
        dataList:[],
        baseUrl:baseUrl
      };
    },
    beforeRouteEnter(to,from,next){
        // if(from.name == )
        let curId = from.query.id;
        next()
    },
    methods:{
       getMyData() {
            let self = this
            let loading = this.$loading({
                                            lock: false,
                                            spinner: 'el-icon-loading',
                                            background: 'rgba(0, 0, 0, 0)',
                                            text:'加载中...',
                                            customClass:'changeColor',
                                            target:self.$refs.myself
                                        });

            let id = self.$route.query.id;
            let select = self.$route.query.select;
            let sendData={}
            sendData.pageNo=self.pageNo;
            sendData.pageSize=10;
            sendData.itype=0;

            sendData.ccardid=id;
            let responseData = fetch('/product/listProduct',sendData,'POST');
            responseData.then((res)=>{
                if(res.result == 1){
                    let items = res.data.list;
                    if(items.length == 0 || items.length<10){
                        self.nodata = true;
                        self.hasdata = false;
                    }else{
                        self.hasdata = true;
                        self.nodata = false;
                    }
                    items.forEach( (item,key) => {
                        if(self.cardIds.indexOf(item.id)<0){//去重
                            self.cardIds.push(item.id);
                            self.dataList.push(item)
                        }
                    })
                    self.pageNo++;
                    self.$nextTick(()=>{
                        loading.close();
                    })
                }else if(res.result == 111){
                    self.nodata = true;
                    self.hasdata = false;
                    loading.close();
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })
                    loading.close();
                }
            })
        },
        loadmore(){
            this.getMyData();
        },
    },
    components:{
       
    },
    mounted(){
        let self = this;
        self.getMyData();
    },
    activated(){
        console.log(this.curId)
        if(this.curId != this.$route.query.id){
            let self = this;
            self.hasdata=false;
            self.nodata=false;
            self.cardIds=[];
            self.pageNo=1;
            self.dataList=[];

            self.getMyData();
        }
    }
}
</script>

<style scoped>
	.mescroll{ position: static;bottom: 0;}
    .myself{width:100%;height:auto;margin-top:0rem;position: relative;}
    .mescroll{ position: static;bottom: 0;height:auto; padding-bottom: 3.4rem;}
    .myself{width:100%;height:auto;margin-top:0rem;position: relative;}
    .mescroll-upwarp{ padding-top: 30px;}
    .product-one{display:block;width:50%;float:left;height:auto;overflow:hidden;margin-top:1rem;border:0;position:relative}
    .product-one .product-pic{display:block;width:90%;margin:auto}
    .product-one .product-pic img{width:100%;height:150px;display:block}
    .product-one .product-name{display:block;width:100%;text-align:center;height:1.25rem;line-height:1.25rem;font-size:1rem;color:#666}
    .more{ font-size: .8rem; text-align: center; color: #ccc; line-height: 2rem;}

    .cardcode-popup{width: 100%;}
</style>
